<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <meta name="referrer" content="no-referrer"/> -->
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .container {
            width: 1200px;
            margin: auto;
        }
        ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        li{
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }
        img{
            width: 100%;
            height: 300px;
        }
        span{
            display: block;
        }

        .loginIn , 
        .noLogin {
            display: none;
        }
    </style>
</head>
<body>

    <div class="loginIn">欢迎<span class="user"></span>登录<button class="loginOut">退出登录</button></div>
    <div class="noLogin">
        <a href="./01_login.html">去登录</a>
        <a href="./02_reg.html">还没有账号，去注册</a>
    </div>

    

    <div class="container">
        <div class="search">
            <input type="text">
            <button>搜索</button>
        </div>
        <div class="sort">
            <button class="p1">价格升序</button>
            <button class="p0">价格降序</button>
            <button class="x1">销量升序</button>
            <button class="x0">销量降序</button>
        </div>
        <ul>
            <!-- <li>
                <a href="">
                    <img src="" alt="">
                    <h3></h3>
                    <p></p>
                    <strong>999</strong>
                    <span>300</span>
                </a>
            </li> -->
        </ul>
    </div>


    <script src="../js/ajax.js"></script>
    <script>

        // get / post区别 
        //  get 数据暴露在地址栏    不安全的
        //  post  更安全

        //  get请求更快  post慢

        //  get 请求的数据量较小    post 大量的数据



        // 增删改查

        //  查   get 

        //  增，删，改    post


        // 判断是否登录  localStorage   LOGIN_USER
        const oLoginIn = document.querySelector(".loginIn") ;
        const oNoLogin = document.querySelector(".noLogin") ;
        const username = localStorage.getItem('LOGIN_USER') ;
        const oUser = document.querySelector('.user') ;
        if(username) {
            oLoginIn.style.display = 'block' ;
            oUser.innerHTML = username ;
        } else {
            oNoLogin.style.display = 'block' ;
        }



        // 退出登录   清除localStorage    跳转至登录页面
        const oLoginOutBtn = document.querySelector('.loginOut') ;
        oLoginOutBtn.onclick = function() {
            // 清除localStorage
            localStorage.removeItem('LOGIN_USER') ;
            // 跳转至登录页面
            location.href = './01_login.html' ;
        }


        // 渲染页面    

        // 默认关键字为空 ， 按照id升序

        // 全局变量
        let kw = '' ;
        let sortName = 'goods_id' ; // 默认按照id  
        let sortType = 'asc' ;

        const oUl = document.querySelector('ul') ;
        renderList() ;

         // 实现搜索   ---  模糊查询
         const oSearch = document.querySelector('.search button') ;
        const oInp = document.querySelector('.search input') ;
        oSearch.onclick = function() {
            // 改变了全局变量  kw
            kw = oInp.value ;
            console.log(kw);
            // 有输入才发生请求
            if(kw) {
                renderList()
            }
        }


        // 排序
        const oSort = document.querySelector('.sort') ;
        oSort.onclick = function(e) {
            let ev = e || event ;
            let target = ev.target || ev.srcElement ;
            // 价格升序
            if(target.className === 'p1') {
                sortName = 'goods_price' ;
                sortType = 'asc' ;
                renderList()
            }

            // 价格降序
            if(target.className === 'p0') {
                sortName = 'goods_price' ;
                sortType = 'desc' ;
                renderList()
            }

            // 销量升序
            if(target.className === 'x1') {
                sortName = 'goods_xl' ;
                sortType = 'asc' ;
                renderList()
            }

            // 销量降序
            if(target.className === 'x0') {
                sortName = 'goods_xl' ;
                sortType = 'desc' ;
                renderList()
            }

        }










        // 请求数据
        function renderList() {
            ajax({
                type : 'get' ,
                data : {
                    kw ,
                    sortName , 
                    sortType
                } ,
                url :'../php/list_all.php',
                cb : data => {
                    console.log(data);
                    let {list} = data ;
                    let html = '' ;
                    list.forEach( ({goods_des , goods_price , goods_title , goods_img , goods_xl , goods_id}) => {
                        html += `
                        <li>
                            <a href="./04_detail.html?id=${goods_id}">
                                <img src="${goods_img}" alt="">
                                <h3>${goods_title}</h3>
                                <p>${goods_des}</p>
                                <strong>价格：${goods_price}</strong>
                                <span>销量：${goods_xl}</span>
                            </a>
                        </li>
                        `
                    })
                    oUl.innerHTML = html ;
                }
            })
        }









    </script>
    
</body>
</html>